<template>
  <!-- 拍照搜题进行中页面 -->
  <NavBar title="拍照搜题" color="#fff" colorText="#333" brg="#f8f8f8">
  <view class="photo-progress-container">
    
    <!-- 主要内容区域 - 白色卡片 -->
    <view class="main-content">
      <!-- 拍照进行中状态 -->
      <view class="search-progress">
        <!-- 机器人图标 -->
        <view class="robot-container">
            <image class="robot-container-img" src="/static/pho4.png" mode=""></image>
        </view>
        
        <!-- 处理步骤列表 -->
        <view class="progress-steps">
          <view
            class="progress-step"
            v-for="(step, index) in searchProgress"
            :key="index"
            :class="step.status"
            v-show="index <= currentDialogIndex && displayedTexts[index] !== ''"
          >
            <text class="step-text">
              {{ index === 3 && countdown < 10 ? displayedTexts[index] : displayedTexts[index] }}
            </text>
            <view class="step-icon" :class="step.status">
              <!-- 加载状态：显示旋转的pho3.png -->
              <view v-if="step.status === 'loading'" class="loading-spinner">
				   <image class="step-img loading-rotate" src="/static/pho3.png" mode=""></image>
			  </view>
              <!-- 超时状态：显示重试按钮pho5.png -->
              <view v-else-if="step.status === 'timeout'" class="retry-btn" @click="retrySearch">
				  <image class="step-img" src="/static/pho5.png" mode=""></image>
			  </view>
              <!-- 成功状态：显示对勾pho1.png -->
              <view v-else-if="step.status === 'success'" class="success-icon">
				   <image class="step-img" src="/static/pho1.png" mode=""></image>
			  </view>
              <!-- 失败状态：显示叉叉pho2.png -->
              <view v-else-if="step.status === 'failed'" class="failed-icon">
				   <image class="step-img" src="/static/pho2.png" mode=""></image>
			  </view>
              <!-- 默认状态：不显示图标 -->
              <view v-else class="default-icon">
			  </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
  </view>
  </NavBar>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { uploadFile } from '../../utils/ossUpload.js'
import { getToken, fetchUserInfo } from '../../utils/user.js'
import { SOLVE_API } from '../../config/api.js'

// 响应式数据
const currentTime = ref('')
const searchProgress = ref([
  { text: '百度OCR正在识别文字', status: 'loading', icon: '⟳' },
  { text: '正在本地题库搜索答案', status: 'pending', icon: '' },
  { text: '正在调用DeepSeek解答问题', status: 'pending', icon: '' },
  { text: '预计还需要10秒', status: 'pending', icon: '' },
  { text: '解答超时,请重试!', status: 'pending', icon: '重试' }
])

// 对话显示相关的响应式数据
const displayedTexts = ref(['', '', '', '', '']) // 当前显示的文字内容
const currentDialogIndex = ref(-1) // 当前正在显示的对话索引
const isTyping = ref(false) // 是否正在打字
const countdown = ref(10) // 倒计时
const isDialogPaused = ref(false) // 是否暂停对话式效果

// 接口状态追踪
const uploadStatus = ref({
  completed: false,  // 上传是否完成
  success: false,    // 上传是否成功
  errorMsg: ''       // 错误信息
})

const solveStatus = ref({
  completed: false,  // 答题接口是否完成
  success: false,    // 答题接口是否成功
  errorMsg: '',      // 错误信息
  hasResponse: false // 是否有返回（区分超时和失败）
})

// 保存搜题API返回的结果数据
const solveResultData = ref(null)

// 停顿时长配置（毫秒）
const pauseDurations = {
  afterComplete: 500, // 每段对话完成后的停顿时长
  typingSpeed: 70,     // 打字速度（每个字符的间隔）
  beforeIcon: 0,      // 显示图标前的停顿
  beforeNext: 800,      // 开始下一段对话前的停顿
  loadingAnimation: 2000 // 加载动画持续时长
}

// 页面加载时获取当前时间
onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
  console.log('拍照进行中页面已加载')

  // 读取传递过来的文件路径参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options

  if (options.filePath) {
    const filePath = decodeURIComponent(options.filePath)
    console.log('接收到文件路径参数:', filePath)

    // 自动上传图片
    uploadPhotoForSearch(filePath)
  }

  // 自动开始搜索进度
  startSearch()
})

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit',
    hour12: false 
  })
}

// 开始搜索
const startSearch = () => {
  console.log('开始搜索对话流程')

  // 重置所有状态
  displayedTexts.value = ['', '', '', '', '']
  currentDialogIndex.value = -1
  isTyping.value = false
  countdown.value = 10
  isDialogPaused.value = false

  // 重置接口状态
  uploadStatus.value = {
    completed: false,
    success: false,
    errorMsg: ''
  }
  solveStatus.value = {
    completed: false,
    success: false,
    errorMsg: '',
    hasResponse: false
  }

  // 重置搜题结果数据
  solveResultData.value = null

  // 重置进度状态
  searchProgress.value.forEach(item => {
    item.status = 'pending'
    item.icon = ''
  })

  // 开始第一段对话
  setTimeout(() => {
    startDialog(0)
  }, 500)
}

// 开始显示指定索引的对话
const startDialog = async (index: number) => {
  if (index >= searchProgress.value.length || isDialogPaused.value) return

  console.log(`开始第${index + 1}段对话`)
  currentDialogIndex.value = index
  isTyping.value = true

  // 不在这里设置loading状态，让文字先显示

  // 逐字显示文字
  await typeText(index, searchProgress.value[index].text)

  // 检查是否已暂停
  if (isDialogPaused.value) return

  // 文字显示完成，停顿一下
  await sleep(pauseDurations.beforeIcon)

  // 检查是否已暂停
  if (isDialogPaused.value) return

  // 显示结果图标并设置状态（包含过渡动画）
  await setDialogResult(index)

  // 检查是否已暂停
  if (isDialogPaused.value) return

  // 停顿后开始下一段对话
  await sleep(pauseDurations.beforeNext)

  // 检查是否已暂停
  if (isDialogPaused.value) return

  // 开始下一段对话（第四段对话需要特殊处理，不在这里开始第五段）
  if (index < searchProgress.value.length - 1 && index !== 3) {
    startDialog(index + 1)
  }
}

// 逐字显示文字效果
const typeText = async (index: number, text: string) => {
  displayedTexts.value[index] = ''

  for (let i = 0; i < text.length; i++) {
    displayedTexts.value[index] += text[i]
    await sleep(pauseDurations.typingSpeed)
  }

  isTyping.value = false
}

// 设置对话结果
const setDialogResult = async (index: number) => {
  // 先显示加载动画（使用pho3.png并旋转）
  searchProgress.value[index].status = 'loading'
  searchProgress.value[index].icon = '⟳'

  // 等待加载动画时长
  await sleep(pauseDurations.loadingAnimation)

  switch (index) {
    case 0: // 第一段：百度OCR识别文字
      // 等待上传接口完成
      await waitForUploadComplete()

      if (uploadStatus.value.success) {
        // 上传成功，显示对勾
        searchProgress.value[index].status = 'success'
        searchProgress.value[index].icon = '✓'
      } else {
        // 上传失败，显示叉
        searchProgress.value[index].status = 'failed'
        searchProgress.value[index].icon = '✗'

        // 替换第二段对话内容为错误信息
        searchProgress.value[1].text = uploadStatus.value.errorMsg || '上传图片失败，请重试'

        // 暂停对话流程，等待显示第二段错误信息
        // 不在这里暂停，让第二段显示错误信息
      }
      break

    case 1: // 第二段：本地题库搜索答案
      if (!uploadStatus.value.success) {
        // 如果是上传失败后的错误信息显示，直接显示叉并暂停
        searchProgress.value[index].status = 'failed'
        searchProgress.value[index].icon = '✗'
        isDialogPaused.value = true
      } else {
        // 上传成功，检查答题接口状态
        if (solveStatus.value.completed && solveStatus.value.hasResponse) {
          // 答题接口有返回
          if (solveStatus.value.success) {
            // 答题成功，显示对勾
            searchProgress.value[index].status = 'success'
            searchProgress.value[index].icon = '✓'

            // 暂停对话流程
            isDialogPaused.value = true

            // 延迟跳转，让用户看到对勾
            setTimeout(() => {
              console.log('准备跳转到答案页面')

              // 刷新用户信息（异步，不等待）
              fetchUserInfo().then(() => {
                console.log('用户信息刷新成功')
              }).catch((error) => {
                console.error('刷新用户信息失败:', error)
              })

              // 跳转到答案结果页面并关闭当前页面
              if (solveResultData.value) {
                uni.redirectTo({
                  url: `/pages/answer-result/answer-result?data=${encodeURIComponent(JSON.stringify(solveResultData.value))}`
                })
              }
            }, 1000) // 延迟1秒，让用户看到对勾
          } else {
            // 答题失败，显示叉
            searchProgress.value[index].status = 'failed'
            searchProgress.value[index].icon = '✗'

            // 替换第三段对话内容为错误信息
            searchProgress.value[2].text = solveStatus.value.errorMsg || '搜索失败，请重试'
          }
        } else {
          // 答题接口无返回，显示叉，继续第三段
          searchProgress.value[index].status = 'failed'
          searchProgress.value[index].icon = '✗'
        }
      }
      break

    case 2: // 第三段：调用DeepSeek解答问题
      if (solveStatus.value.completed && solveStatus.value.hasResponse && !solveStatus.value.success) {
        // 这是答题失败后的错误信息显示，显示重试按钮
        searchProgress.value[index].status = 'timeout'
        searchProgress.value[index].icon = '↻'
        isDialogPaused.value = true
      } else {
        // 默认第三段对话，显示叉后继续第四段
        searchProgress.value[index].status = 'failed'
        searchProgress.value[index].icon = '✗'
      }
      break

    case 3: // 第四段：倒计时
      // 开始倒计时
      startCountdown()
      return // 直接返回，不设置状态

    case 4: // 第五段：解答超时
      if (solveStatus.value.completed && solveStatus.value.hasResponse && !solveStatus.value.success) {
        // 这是答题失败后的错误信息显示
        searchProgress.value[index].status = 'failed'
        searchProgress.value[index].icon = '✗'
        isDialogPaused.value = true
      } else {
        // 默认超时，显示重试按钮
        searchProgress.value[index].status = 'timeout'
        searchProgress.value[index].icon = '重试'
        isDialogPaused.value = true
      }
      break
  }
}

// 等待上传接口完成
const waitForUploadComplete = async () => {
  const maxWaitTime = 30000 // 最多等待30秒
  const checkInterval = 100 // 每100ms检查一次
  let waitedTime = 0

  while (!uploadStatus.value.completed && waitedTime < maxWaitTime) {
    await sleep(checkInterval)
    waitedTime += checkInterval
  }

  if (!uploadStatus.value.completed) {
    // 超时，设置为失败
    uploadStatus.value.completed = true
    uploadStatus.value.success = false
    uploadStatus.value.errorMsg = '上传超时，请重试'
  }
}

// 开始倒计时
const startCountdown = () => {
  const timer = setInterval(() => {
    // 检查是否已暂停
    if (isDialogPaused.value) {
      clearInterval(timer)
      return
    }

    countdown.value--

    // 更新第四段对话的文字内容
    const baseText = '预计还需要'
    displayedTexts.value[3] = `${baseText}${countdown.value}秒`

    if (countdown.value <= 0) {
      clearInterval(timer)

      // 检查答题接口状态
      if (solveStatus.value.completed && solveStatus.value.hasResponse) {
        // 有返回
        if (solveStatus.value.success) {
          // 成功，显示对勾
          searchProgress.value[3].status = 'success'
          searchProgress.value[3].icon = '✓'
          isDialogPaused.value = true

          // 延迟跳转，让用户看到对勾
          setTimeout(() => {
            console.log('准备跳转到答案页面')

            // 刷新用户信息（异步，不等待）
            fetchUserInfo().then(() => {
              console.log('用户信息刷新成功')
            }).catch((error) => {
              console.error('刷新用户信息失败:', error)
            })

            // 跳转到答案结果页面并关闭当前页面
            if (solveResultData.value) {
              uni.redirectTo({
                url: `/pages/answer-result/answer-result?data=${encodeURIComponent(JSON.stringify(solveResultData.value))}`
              })
            }
          }, 1000) // 延迟1秒，让用户看到对勾
        } else {
          // 失败，显示叉
          searchProgress.value[3].status = 'failed'
          searchProgress.value[3].icon = '✗'

          // 替换第五段对话内容为错误信息
          searchProgress.value[4].text = solveStatus.value.errorMsg || '解答失败，请重试'

          // 停顿后开始第五段对话
          setTimeout(() => {
            if (!isDialogPaused.value) {
              console.log('倒计时完成，开始第五段对话（错误信息）')
              startDialog(4)
            }
          }, pauseDurations.beforeNext)
        }
      } else {
        // 无返回，显示叉，播放默认第五段
        searchProgress.value[3].status = 'failed'
        searchProgress.value[3].icon = '✗'

        // 停顿后开始第五段对话
        setTimeout(() => {
          if (!isDialogPaused.value) {
            console.log('倒计时完成，开始第五段对话（超时）')
            startDialog(4)
          }
        }, pauseDurations.beforeNext)
      }
    }
  }, 1000)
}

// 睡眠函数
const sleep = (ms: number) => {
  return new Promise(resolve => setTimeout(resolve, ms))
}

// 重试搜索
const retrySearch = () => {
  console.log('用户点击重试，返回上一个页面')

  // 返回上一个页面
  uni.navigateBack({
    delta: 1,
    success: () => {
      console.log('返回成功')
    },
    fail: (err) => {
      console.error('返回失败:', err)
      // 如果返回失败，提示用户
      uni.showToast({
        title: '返回失败，请手动返回',
        icon: 'none'
      })
    }
  })
}

// 调用搜题API
const callSolveImageAPI = async (imageUrl: string) => {
  try {
    console.log('=== 开始调用搜题API ===')
    console.log('图片URL:', imageUrl)

    // 获取用户token
    const token = getToken()
    if (!token) {
      console.error('未找到用户token')
      solveStatus.value = {
        completed: true,
        success: false,
        errorMsg: '未找到用户token',
        hasResponse: true
      }
      return
    }

    // 调用搜题API
    const response = await uni.request({
      url: SOLVE_API.IMAGE,
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      data: {
        image_url: imageUrl
      }
    })

    console.log('=== 搜题API响应 ===')
    console.log('响应状态码:', response.statusCode)
    console.log('响应数据:', response.data)

    // 标记接口已有返回
    solveStatus.value.hasResponse = true
    solveStatus.value.completed = true

    if (response.statusCode === 200 && response.data.code === 200) {
      // 请求成功
      console.log('搜题API调用成功')
      solveStatus.value.success = true

      // 将搜题结果数据保存到响应式变量
      solveResultData.value = response.data.data
      console.log('搜题成功，保存结果数据:', solveResultData.value)

      // 不在这里跳转，让对话流程在第二段或第四段显示对勾后再跳转
      return response.data
    } else {
      // 请求失败
      console.error('搜题API调用失败:', response)
      solveStatus.value.success = false

      // 特殊错误码处理
      if (response.data?.code === 8800) {
        solveStatus.value.errorMsg = '图片不标准，请正确拍照'
      } else {
        // 优先读取 data.error_message，其次是 message，最后是默认提示
        let errorMsg = response.data?.data?.error_message || response.data?.message || '搜题失败，请重试'
        // 去掉 "API error: " 前缀
        errorMsg = errorMsg.replace(/API error:\s*/i, '')
        solveStatus.value.errorMsg = errorMsg
      }
    }

  } catch (error) {
    console.error('=== 搜题API调用异常 ===')
    console.error('错误详情:', error)

    // 标记接口异常
    solveStatus.value.completed = true
    solveStatus.value.success = false
    solveStatus.value.hasResponse = true
    solveStatus.value.errorMsg = '网络异常，请重试'
  }
}

// 上传搜题图片
const uploadPhotoForSearch = async (filePath: string) => {
  try {
    console.log('=== 开始拍照搜题上传流程 ===')
    console.log('文件路径:', filePath)

    // 使用solve_image用途上传图片
    const fileUrl = await uploadFile(filePath, 'solve_image')
    console.log('搜题图片上传成功:', fileUrl)
    console.log('搜题图片URL:', fileUrl)

    // 标记上传成功
    uploadStatus.value.completed = true
    uploadStatus.value.success = true

    // 调用搜题API
    await callSolveImageAPI(fileUrl)

  } catch (error) {
    console.error('=== 拍照搜题上传失败 ===')
    console.error('错误详情:', error)

    // 标记上传失败
    uploadStatus.value.completed = true
    uploadStatus.value.success = false
    uploadStatus.value.errorMsg = error?.errMsg || error?.message || '系统错误，请联系管理员处理'
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    success: () => {
      console.log('返回成功')
    },
    fail: (err) => {
      console.error('返回失败:', err)
      // 如果返回失败，跳转到首页
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  })
  // // 搜索完成后跳转到参考答案页面
  // setTimeout(() => {
  //   uni.navigateTo({
  //     url: '/pages/answer-result/answer-result'
  //   })
  // }, 10000)
}
</script>

<style scoped>
.photo-progress-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #C2DDFF 0%, #FFFFFF 100%);
  padding-top: 160rpx;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx 10rpx;
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 100;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.back-arrow {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
}

.status-time {
  font-size: 34rpx;
  font-weight: 600;
  color: #1A1A1A;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-center {
  flex: 1;
  text-align: center;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #1A1A1A;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.status-icon {
  font-size: 24rpx;
  color: #1A1A1A;
  opacity: 0.8;
}

/* 主要内容区域 */
.main-content {
  margin: 30rpx;
  margin-bottom: 0; /* 底部不留边距 */
  background: white;
  border-radius: 24rpx;
  border-bottom-left-radius: 0; /* 底部圆角去掉 */
  border-bottom-right-radius: 0; /* 底部圆角去掉 */
  padding: 40rpx;
  padding-bottom: 60rpx; /* 底部内边距加大 */
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 160rpx - 30rpx); /* 填满到底部：100vh - 顶部padding - 顶部margin */
}

/* 拍照进行中状态 */
.search-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
}

/* 机器人容器 */
.robot-container {
	margin-top: 165rpx;
  margin-bottom: 60rpx;
  display: flex;
  justify-content: center;
}

.robot-icon {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.robot-body {
  width: 120rpx;
  height: 160rpx;
  background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%);
  border-radius: 20rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 32rpx rgba(156, 39, 176, 0.3);
}

.robot-screen {
  font-size: 32rpx;
  color: #007AFF;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.robot-x {
  font-size: 24rpx;
  color: #007AFF;
  font-weight: bold;
}

.robot-antenna {
  position: absolute;
  top: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 8rpx;
  height: 30rpx;
  background: #64B5F6;
  border-radius: 4rpx;
}

.robot-arm {
  position: absolute;
  right: -20rpx;
  top: 40rpx;
  width: 40rpx;
  height: 8rpx;
  background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%);
  border-radius: 4rpx;
  transform: rotate(15deg);
}

/* 进度步骤列表 */
.progress-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8rpx; /* 缩小对话间隔：从 20rpx 改为 8rpx */
}

.progress-step {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 改为顶部对齐，适应多行文本 */
  padding: 12rpx 0; /* 缩小上下内边距：从 24rpx 改为 12rpx */
  transition: all 0.3s ease;
}

.progress-step:last-child {
  border-bottom: none;
}

.step-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  max-width: 520rpx; /* 限制最大宽度，约20个字换行 */
  min-height: 40rpx;
  line-height: 44rpx; /* 增加行高，让多行文本更易读 */
  word-wrap: break-word; /* 允许单词内换行 */
  word-break: break-all; /* 允许在任意字符间换行 */
  white-space: normal; /* 允许换行 */
}

.step-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 24rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

/* 成功图标样式 */
.success-icon {
  color: #4CAF50;
  font-size: 32rpx;
  font-weight: bold;
}

/* 失败图标样式 */
.failed-icon {
  color: #F44336;
  font-size: 32rpx;
  font-weight: bold;
}

/* 重试按钮样式 - 按图片实际尺寸显示 */
.retry-btn {
  cursor: pointer;
}

.retry-btn .step-img {
  width: 100rpx;
  height: 48rpx;
}




.loading-spinner {
  animation: spin 1s linear infinite;
}

.loading-rotate {
  animation: spin 1s linear infinite;
}


.robot-container-img{
	width: 252rpx;
	height: 320rpx;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.step-img{
	width: 32rpx;
	height: 32rpx;
}
/* 底部指示条 */
.bottom-indicator {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120rpx;
  height: 8rpx;
  background: #000;
  border-radius: 4rpx;
  margin-bottom: 10rpx;
}
</style>
